<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-beta.46" />
    <meta name="theme" content="VuePress Theme Hope" />
    <meta property="og:url" content="https://hjdbenny.github.io/blog/blog/web/vue3.html"><meta property="og:site_name" content="笔记整理"><meta property="og:title" content="vite+vue3+ts+pinia+vueuse"><meta property="og:type" content="article"><meta property="og:locale" content="zh-CN"><meta property="article:tag" content="web"><meta property="article:tag" content="vue3"><meta property="article:published_time" content="2022-06-17T00:00:00.000Z"><link rel="stylesheet" href="//at.alicdn.com/t/font_2410206_mfj6e1vbwo.css"><title>vite+vue3+ts+pinia+vueuse | 笔记整理</title><meta name="description" content="前端笔记整理">
    <style>
      :root {
        --bg-color: #fff;
      }

      html[data-theme="dark"] {
        --bg-color: #1d2025;
      }

      html,
      body {
        background-color: var(--bg-color);
      }
    </style>
    <script>
      const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
      const systemDarkMode =
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches;

      if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
        document.querySelector("html").setAttribute("data-theme", "dark");
      }
    </script>
    <link rel="stylesheet" href="/blog/assets/style.08f1251e.css">
    <link rel="modulepreload" href="/blog/assets/app.0bf46e8a.js"><link rel="modulepreload" href="/blog/assets/vue3.html.e931cac2.js"><link rel="modulepreload" href="/blog/assets/plugin-vue_export-helper.21dcd24c.js"><link rel="modulepreload" href="/blog/assets/vue3.html.c9788e3f.js"><link rel="prefetch" href="/blog/assets/index.html.abcfc968.js"><link rel="prefetch" href="/blog/assets/markdown.html.d15d9d1f.js"><link rel="prefetch" href="/blog/assets/index.html.a4ed4caf.js"><link rel="prefetch" href="/blog/assets/404.html.68e71acc.js"><link rel="prefetch" href="/blog/assets/index.html.4fb08766.js"><link rel="prefetch" href="/blog/assets/index.html.ba497813.js"><link rel="prefetch" href="/blog/assets/index.html.d01f22d8.js"><link rel="prefetch" href="/blog/assets/index.html.9d8d3ef9.js"><link rel="prefetch" href="/blog/assets/index.html.3260d211.js"><link rel="prefetch" href="/blog/assets/index.html.278769e5.js"><link rel="prefetch" href="/blog/assets/index.html.de89d36c.js"><link rel="prefetch" href="/blog/assets/index.html.21a45cae.js"><link rel="prefetch" href="/blog/assets/index.html.06360972.js"><link rel="prefetch" href="/blog/assets/index.html.3423d6b4.js"><link rel="prefetch" href="/blog/assets/index.html.a27f3d7b.js"><link rel="prefetch" href="/blog/assets/index.html.3648fc66.js"><link rel="prefetch" href="/blog/assets/index.html.9208cda6.js"><link rel="prefetch" href="/blog/assets/index.html.21d017e9.js"><link rel="prefetch" href="/blog/assets/markdown.html.de701a8b.js"><link rel="prefetch" href="/blog/assets/index.html.8a0d6ae4.js"><link rel="prefetch" href="/blog/assets/404.html.37bf58f4.js"><link rel="prefetch" href="/blog/assets/index.html.0b69e196.js"><link rel="prefetch" href="/blog/assets/index.html.9008806c.js"><link rel="prefetch" href="/blog/assets/index.html.13ac8be4.js"><link rel="prefetch" href="/blog/assets/index.html.2e8282bb.js"><link rel="prefetch" href="/blog/assets/index.html.e8d380f2.js"><link rel="prefetch" href="/blog/assets/index.html.7bf8a740.js"><link rel="prefetch" href="/blog/assets/index.html.ad099e41.js"><link rel="prefetch" href="/blog/assets/index.html.501f220a.js"><link rel="prefetch" href="/blog/assets/index.html.df3b44cb.js"><link rel="prefetch" href="/blog/assets/index.html.e61f5b1a.js"><link rel="prefetch" href="/blog/assets/index.html.c63772c7.js"><link rel="prefetch" href="/blog/assets/index.html.2455965c.js"><link rel="prefetch" href="/blog/assets/index.html.413130ef.js"><link rel="prefetch" href="/blog/assets/404.0cd0c936.js"><link rel="prefetch" href="/blog/assets/Layout.4d2723b5.js"><link rel="prefetch" href="/blog/assets/Slide.62a6ff08.js"><link rel="prefetch" href="/blog/assets/Blog.1b788198.js"><link rel="prefetch" href="/blog/assets/auto.esm.36809f22.js"><link rel="prefetch" href="/blog/assets/index.5cb56ef7.js"><link rel="prefetch" href="/blog/assets/index.1842ee54.js"><link rel="prefetch" href="/blog/assets/mermaid.esm.min.95aabeb7.js"><link rel="prefetch" href="/blog/assets/highlight.esm.d982e650.js"><link rel="prefetch" href="/blog/assets/markdown.esm.832a189d.js"><link rel="prefetch" href="/blog/assets/math.esm.a3f84b6f.js"><link rel="prefetch" href="/blog/assets/notes.esm.3c361cb7.js"><link rel="prefetch" href="/blog/assets/reveal.esm.b96f05d8.js"><link rel="prefetch" href="/blog/assets/search.esm.80da4a02.js"><link rel="prefetch" href="/blog/assets/zoom.esm.8514a202.js"><link rel="prefetch" href="/blog/assets/photoswipe.esm.92018b73.js">
  </head>
  <body>
    <div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="skip-link sr-only">Skip to content</a><!--]--><div class="theme-container has-toc"><!--[--><!--[--><header class="navbar"><div class="navbar-left"><button class="toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!----><a href="/blog/" class="brand"><img class="logo" src="/blog/logo.png" alt="笔记整理"><!----><span class="site-name hide-in-pad">笔记整理</span></a><!----></div><div class="navbar-center"><!----><nav class="nav-links"><div class="nav-item hide-in-mobile"><a href="/blog/" class="nav-link" aria-label="首页"><span class="icon iconfont icon-home" style=""></span>首页<!----></a></div><div class="nav-item hide-in-mobile"><a href="/blog/web/" class="nav-link active" aria-label="前端"><span class="icon iconfont icon-info" style=""></span>前端<!----></a></div></nav><!----></div><div class="navbar-right"><!----><div class="nav-item"><!----></div><div class="nav-item"><a class="repo-link" href="https://github.com/hjdbenny/blog" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="github icon" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="nav-item hide-in-mobile"><button id="appearance-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="light icon" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><!----><!----><button class="toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span class="button-container"><span class="button-top"></span><span class="button-middle"></span><span class="button-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow left"></span></div><aside class="sidebar"><!--[--><!----><!--]--><ul class="sidebar-links"><li><!--[--><a href="/blog/web/" class="nav-link sidebar-link sidebar-page" aria-label="前端笔记"><!---->前端笔记<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li><li><!--[--><a href="/blog/web/markdown.html" class="nav-link sidebar-link sidebar-page" aria-label="Markdown 示例"><!---->Markdown 示例<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li><li><!--[--><a aria-current="page" href="/blog/web/vue3.html" class="router-link-active router-link-exact-active nav-link active sidebar-link sidebar-page active" aria-label="vite+vue3+ts+pinia+vueuse"><!---->vite+vue3+ts+pinia+vueuse<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_1-初始化项目" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="1.初始化项目"><!---->1.初始化项目<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#按步骤提示初始化" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="按步骤提示初始化："><!---->按步骤提示初始化：<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#集成配置" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="集成配置"><!---->集成配置<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_2-代码质量风格的统一" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="2. 代码质量风格的统一"><!---->2. 代码质量风格的统一<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#集成-eslint" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="集成 eslint"><!---->集成 eslint<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#集成-prettier" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="集成 prettier"><!---->集成 prettier<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_3-集成-pinia" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="3.集成 pinia"><!---->3.集成 pinia<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#安装" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="安装"><!---->安装<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#使用" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="使用"><!---->使用<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#集成-vue-router4" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="集成 vue-router4"><!---->集成 vue-router4<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#安装-1" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="安装"><!---->安装<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#使用-1" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="使用"><!---->使用<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_5-集成-vueuse" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="5. 集成 vueuse"><!---->5. 集成 vueuse<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#安装-2" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="安装"><!---->安装<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#使用-2" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="使用"><!---->使用<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_6-scss-或-less-的集成" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="6. scss 或 less 的集成"><!---->6. scss 或 less 的集成<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#安装-3" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="安装"><!---->安装<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#使用在-vue-文件模板中" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="使用在 .vue 文件模板中"><!---->使用在 .vue 文件模板中<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_7-集成-axios" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="7.集成 axios"><!---->7.集成 axios<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#安装-4" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="安装"><!---->安装<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#使用-3" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="使用"><!---->使用<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#封装请求参数和响应数据的所有-api" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="封装请求参数和响应数据的所有 api"><!---->封装请求参数和响应数据的所有 api<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_8-css-的-ui-样式库" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="8.css 的 UI 样式库"><!---->8.css 的 UI 样式库<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#_9-使用-commitizen-规范-git-提交" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="9.使用 commitizen 规范 git 提交"><!---->9.使用 commitizen 规范 git 提交<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#安装-commitizen-交互式提交-自定义提示文案-commit-规范" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="安装 commitizen (交互式提交 + 自定义提示文案 + Commit 规范)"><!---->安装 commitizen (交互式提交 + 自定义提示文案 + Commit 规范)<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/blog/web/vue3.html#安装-husky" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="安装 husky"><!---->安装 husky<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li></ul><!--]--></li></ul><!--[--><!----><!--]--></aside><!--[--><main class="page" id="main-content"><!--[--><!----><nav class="breadcrumb disable"></nav><div class="page-title"><h1><!---->vite+vue3+ts+pinia+vueuse</h1><div class="page-info"><span class="author-info" aria-label="作者🖊" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon author-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="author icon"><path d="M649.6 633.6c86.4-48 147.2-144 147.2-249.6 0-160-128-288-288-288s-288 128-288 288c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 9.6 0 19.2 6.4 25.6 3.2 9.6 12.8 12.8 22.4 12.8h704c9.6 0 19.2-3.2 25.6-12.8 6.4-6.4 9.6-16 6.4-25.6-25.6-134.4-121.6-240-243.2-288z"></path></svg><span><a class="author-item" href="https://hjdbenny.github.io/blog/" target="_blank" rel="noopener noreferrer">潇湘阁听雨</a></span><span property="author" content="潇湘阁听雨"></span></span><!----><span class="date-info" aria-label="写作日期📅" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon calendar-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="calendar icon"><path d="M716.4 110.137c0-18.753-14.72-33.473-33.472-33.473-18.753 0-33.473 14.72-33.473 33.473v33.473h66.993v-33.473zm-334.87 0c0-18.753-14.72-33.473-33.473-33.473s-33.52 14.72-33.52 33.473v33.473h66.993v-33.473zm468.81 33.52H716.4v100.465c0 18.753-14.72 33.473-33.472 33.473a33.145 33.145 0 01-33.473-33.473V143.657H381.53v100.465c0 18.753-14.72 33.473-33.473 33.473a33.145 33.145 0 01-33.473-33.473V143.657H180.6A134.314 134.314 0 0046.66 277.595v535.756A134.314 134.314 0 00180.6 947.289h669.74a134.36 134.36 0 00133.94-133.938V277.595a134.314 134.314 0 00-133.94-133.938zm33.473 267.877H147.126a33.145 33.145 0 01-33.473-33.473c0-18.752 14.72-33.473 33.473-33.473h736.687c18.752 0 33.472 14.72 33.472 33.473a33.145 33.145 0 01-33.472 33.473z"></path></svg><span>2022年6月17日</span><meta property="datePublished" content="2022-06-17T00:00:00.000Z"></span><span class="category-info" aria-label="分类🌈" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon category-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="category icon"><path d="M148.41 106.992h282.176c22.263 0 40.31 18.048 40.31 40.31V429.48c0 22.263-18.047 40.31-40.31 40.31H148.41c-22.263 0-40.311-18.047-40.311-40.31V147.302c0-22.263 18.048-40.31 40.311-40.31zM147.556 553.478H429.73c22.263 0 40.311 18.048 40.311 40.31v282.176c0 22.263-18.048 40.312-40.31 40.312H147.555c-22.263 0-40.311-18.049-40.311-40.312V593.79c0-22.263 18.048-40.311 40.31-40.311zM593.927 106.992h282.176c22.263 0 40.31 18.048 40.31 40.31V429.48c0 22.263-18.047 40.31-40.31 40.31H593.927c-22.263 0-40.311-18.047-40.311-40.31V147.302c0-22.263 18.048-40.31 40.31-40.31zM730.22 920.502H623.926c-40.925 0-74.22-33.388-74.22-74.425V623.992c0-41.038 33.387-74.424 74.425-74.424h222.085c41.038 0 74.424 33.226 74.424 74.067v114.233c0 10.244-8.304 18.548-18.547 18.548s-18.548-8.304-18.548-18.548V623.635c0-20.388-16.746-36.974-37.33-36.974H624.13c-20.585 0-37.331 16.747-37.331 37.33v222.086c0 20.585 16.654 37.331 37.126 37.331H730.22c10.243 0 18.547 8.304 18.547 18.547 0 10.244-8.304 18.547-18.547 18.547z"></path></svg><ul class="categories-wrapper"><li class="category category1 clickable" role="navigation">web</li><li class="category category1 clickable" role="navigation">vue3</li><meta property="articleSection" content="web,vue3"></ul></span><span aria-label="标签🏷" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon tag-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="tag icon"><path d="M939.902 458.563L910.17 144.567c-1.507-16.272-14.465-29.13-30.737-30.737L565.438 84.098h-.402c-3.215 0-5.726 1.005-7.634 2.913l-470.39 470.39a10.004 10.004 0 000 14.164l365.423 365.424c1.909 1.908 4.42 2.913 7.132 2.913s5.223-1.005 7.132-2.913l470.39-470.39c2.01-2.11 3.014-5.023 2.813-8.036zm-240.067-72.121c-35.458 0-64.286-28.828-64.286-64.286s28.828-64.285 64.286-64.285 64.286 28.828 64.286 64.285-28.829 64.286-64.286 64.286z"></path></svg><ul class="tags-wrapper"><li class="tag tag1 clickable" role="navigation">web</li><li class="tag tag1 clickable" role="navigation">vue3</li></ul><meta property="keywords" content="web,vue3"></span><span class="reading-time-info" aria-label="阅读时间⌛" data-balloon-pos="down" isoriginal="false" pageview="false"><svg xmlns="http://www.w3.org/2000/svg" class="icon timer-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="timer icon"><path d="M799.387 122.15c4.402-2.978 7.38-7.897 7.38-13.463v-1.165c0-8.933-7.38-16.312-16.312-16.312H256.33c-8.933 0-16.311 7.38-16.311 16.312v1.165c0 5.825 2.977 10.874 7.637 13.592 4.143 194.44 97.22 354.963 220.201 392.763-122.204 37.542-214.893 196.511-220.2 389.397-4.661 5.049-7.638 11.651-7.638 19.03v5.825h566.49v-5.825c0-7.379-2.849-13.981-7.509-18.9-5.049-193.016-97.867-351.985-220.2-389.527 123.24-37.67 216.446-198.453 220.588-392.892zM531.16 450.445v352.632c117.674 1.553 211.787 40.778 211.787 88.676H304.097c0-48.286 95.149-87.382 213.728-88.676V450.445c-93.077-3.107-167.901-81.297-167.901-177.093 0-8.803 6.99-15.793 15.793-15.793 8.803 0 15.794 6.99 15.794 15.793 0 80.261 63.69 145.635 142.01 145.635s142.011-65.374 142.011-145.635c0-8.803 6.99-15.793 15.794-15.793s15.793 6.99 15.793 15.793c0 95.019-73.789 172.82-165.96 177.093z"></path></svg><span>大约 9 分钟</span><meta property="timeRequired" content="PT9M"></span></div><hr></div><div class="toc-place-holder"><aside id="toc"><div class="toc-header">此页内容</div><div class="toc-wrapper"><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_1-初始化项目" class="router-link-active router-link-exact-active toc-link level2">1.初始化项目</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#按步骤提示初始化" class="router-link-active router-link-exact-active toc-link level3">按步骤提示初始化：</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#集成配置" class="router-link-active router-link-exact-active toc-link level3">集成配置</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_2-代码质量风格的统一" class="router-link-active router-link-exact-active toc-link level2">2. 代码质量风格的统一</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#集成-eslint" class="router-link-active router-link-exact-active toc-link level3">集成 eslint</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#集成-prettier" class="router-link-active router-link-exact-active toc-link level3">集成 prettier</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_3-集成-pinia" class="router-link-active router-link-exact-active toc-link level2">3.集成 pinia</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#安装" class="router-link-active router-link-exact-active toc-link level3">安装</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#使用" class="router-link-active router-link-exact-active toc-link level3">使用</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#集成-vue-router4" class="router-link-active router-link-exact-active toc-link level2">集成 vue-router4</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#安装-1" class="router-link-active router-link-exact-active toc-link level3">安装</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#使用-1" class="router-link-active router-link-exact-active toc-link level3">使用</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_5-集成-vueuse" class="router-link-active router-link-exact-active toc-link level2">5. 集成 vueuse</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#安装-2" class="router-link-active router-link-exact-active toc-link level3">安装</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#使用-2" class="router-link-active router-link-exact-active toc-link level3">使用</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_6-scss-或-less-的集成" class="router-link-active router-link-exact-active toc-link level2">6. scss 或 less 的集成</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#安装-3" class="router-link-active router-link-exact-active toc-link level3">安装</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#使用在-vue-文件模板中" class="router-link-active router-link-exact-active toc-link level3">使用在 .vue 文件模板中</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_7-集成-axios" class="router-link-active router-link-exact-active toc-link level2">7.集成 axios</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#安装-4" class="router-link-active router-link-exact-active toc-link level3">安装</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#使用-3" class="router-link-active router-link-exact-active toc-link level3">使用</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#封装请求参数和响应数据的所有-api" class="router-link-active router-link-exact-active toc-link level3">封装请求参数和响应数据的所有 api</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_8-css-的-ui-样式库" class="router-link-active router-link-exact-active toc-link level2">8.css 的 UI 样式库</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#_9-使用-commitizen-规范-git-提交" class="router-link-active router-link-exact-active toc-link level2">9.使用 commitizen 规范 git 提交</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#安装-commitizen-交互式提交-自定义提示文案-commit-规范" class="router-link-active router-link-exact-active toc-link level3">安装 commitizen (交互式提交 + 自定义提示文案 + Commit 规范)</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/blog/web/vue3.html#安装-husky" class="router-link-active router-link-exact-active toc-link level3">安装 husky</a></li><!----><!--]--></ul><!--]--></ul></div></aside></div><!----><div class="theme-hope-content"><h2 id="_1-初始化项目" tabindex="-1"><a class="header-anchor" href="#_1-初始化项目" aria-hidden="true">#</a> 1.初始化项目</h2><h3 id="按步骤提示初始化" tabindex="-1"><a class="header-anchor" href="#按步骤提示初始化" aria-hidden="true">#</a> 按步骤提示初始化：</h3><p>1.使用 <code>vite-cli</code> 命令</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code># npm
npm init vite@latest
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>2.输入项目名：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Project name:  vite-vue3-ts-pinia
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>3.选择一个框架（vue）</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 &gt;   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>4.使用 <code>typescript</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Select a variant: › - Use arrow-keys. Return to submit.
     vue
 ❯   vue-ts
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>5.启动项目</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>cd vite-vue3-ts-pinia &amp;&amp; pnpm install &amp;&amp; pnpm run dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="集成配置" tabindex="-1"><a class="header-anchor" href="#集成配置" aria-hidden="true">#</a> 集成配置</h3><p>1.为保证 <code>node</code> 的使用</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm i @types/node --save-dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>2.修改 <code>tsconfig.json</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{
  &quot;compilerOptions&quot;: {
    &quot;typeRoots&quot;: [
      &quot;node_modules/@types&quot;, // 默认值
      &quot;src/types&quot;
   ],
    &quot;target&quot;: &quot;esnext&quot;,
    &quot;useDefineForClassFields&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;strict&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;sourceMap&quot;: true,
    &quot;resolveJsonModule&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;lib&quot;: [&quot;esnext&quot;, &quot;dom&quot;],
    &quot;baseUrl&quot;: &quot;./&quot;,
    &quot;paths&quot;:{
      &quot;@&quot;: [&quot;src&quot;],
      &quot;@/*&quot;: [&quot;src/*&quot;],
    }
  },
  &quot;include&quot;: [&quot;src/**/*.ts&quot;, &quot;src/**/*.d.ts&quot;, &quot;src/**/*.tsx&quot;, &quot;src/**/*.vue&quot;]
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.修改 <code>vite.config.ts</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>import { defineConfig } from &#39;vite&#39;;
import vue from &#39;@vitejs/plugin-vue&#39;;
import * as path from &#39;path&#39;;

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        //设置别名
        alias: {
            &#39;@&#39;: path.resolve(__dirname, &#39;src&#39;)
        }
    },
    plugins: [vue()],
    server: {
        port: 8080, //启动端口
        hmr: {
            host: &#39;127.0.0.1&#39;,
            port: 8080
        },
        // 设置 https 代理
        proxy: {
            &#39;/api&#39;: {
                target: &#39;your https address&#39;,
                changeOrigin: true,
                rewrite: (path: string) =&gt; path.replace(/^\/api/, &#39;&#39;)
            }
        }
    }
});
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-代码质量风格的统一" tabindex="-1"><a class="header-anchor" href="#_2-代码质量风格的统一" aria-hidden="true">#</a> 2. 代码质量风格的统一</h2><h3 id="集成-eslint" tabindex="-1"><a class="header-anchor" href="#集成-eslint" aria-hidden="true">#</a> 集成 <code>eslint</code></h3><p>1.安装</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm install @typescript-eslint/parser --save-dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm install @typescript-eslint/eslint-plugin --save-dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>2.创建配置文件： <code>.eslintrc.js</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module.exports = {
    parser: &#39;vue-eslint-parser&#39;,

    parserOptions: {
        parser: &#39;@typescript-eslint/parser&#39;,
        ecmaVersion: 2020,
        sourceType: &#39;module&#39;,
        ecmaFeatures: {
            jsx: true
        }
    },

    extends: [
        &#39;plugin:vue/vue3-recommended&#39;,
        &#39;plugin:@typescript-eslint/recommended&#39;,
    ],

    rules: {
        // override/add rules settings here, such as:
    }
};
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.创建忽略文件：<code>.eslintignore</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>node_modules/
dist/
index.html
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>4.命令行式运行：修改 <code>package.json</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{
    ...
    &quot;scripts&quot;: {
        ...
        &quot;eslint:comment&quot;: &quot;使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件&quot;,
        &quot;eslint&quot;: &quot;eslint --ext .js,.vue --ignore-path .gitignore --fix src&quot;,
    }
    ...
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="集成-prettier" tabindex="-1"><a class="header-anchor" href="#集成-prettier" aria-hidden="true">#</a> 集成 <code>prettier</code></h3><p>1.安装</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>2.创建配置文件： <code>prettier.config.js</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module.exports = {
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用 tab 缩进，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号代替双引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: &#39;as-needed&#39;,
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾使用逗号
    trailingComma: &#39;all&#39;,
    // 大括号内的首尾需要空格 { foo: bar }
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: &#39;always&#39;,
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: &#39;preserve&#39;,
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: &#39;css&#39;,
    // 换行符使用 lf
    endOfLine: &#39;auto&#39;
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.修改 <code>.eslintrc.js</code> 配置</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module.exports = {
    ...

    extends: [
        &#39;plugin:vue/vue3-recommended&#39;,
        &#39;plugin:@typescript-eslint/recommended&#39;,
        &#39;prettier&#39;,
        &#39;plugin:prettier/recommended&#39;
    ],

    ...
};
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>4.命令行式运行：修改 <code>package.json</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{
    ...
    &quot;scripts&quot;: {
        ...
        &quot;prettier:comment&quot;: &quot;自动格式化当前目录下的所有文件&quot;,
        &quot;prettier&quot;: &quot;prettier --write&quot;
    }
    ...
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-集成-pinia" tabindex="-1"><a class="header-anchor" href="#_3-集成-pinia" aria-hidden="true">#</a> 3.集成 <code>pinia</code></h2><p>Pinia 有如下特点：</p><ul><li>完整的 typescript 的支持；</li><li>足够轻量，压缩后的体积只有 1.6kb;</li><li>去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；</li><li>actions 支持同步和异步；</li><li>没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；</li><li>无需手动添加 store，store 一旦创建便会自动添加；</li></ul><h3 id="安装" tabindex="-1"><a class="header-anchor" href="#安装" aria-hidden="true">#</a> 安装</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm i pinia --save
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h3><p>1.新建 <code>src/store</code> 目录并在其下面创建 <code>index.ts</code>，导出 <code>store</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> import { createPinia } from &#39;pinia&#39;

 const store = createPinia()

 export default store
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2.在 <code>main.ts</code> 中引入并使用</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> import { createApp } from &#39;vue&#39;
 import App from &#39;./App.vue&#39;
 import store from &#39;./store&#39;
 ​
 // 创建vue实例
 const app = createApp(App)
 ​
 // 挂载pinia
 app.use(store)
 ​
 // 挂载实例
 app.mount(&#39;#app&#39;);

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.定义 State： 在 <code>src/store</code> 下面创建一个 <code>user.ts</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> import { defineStore } from &#39;pinia&#39;

 export const useUserStore = defineStore({
   id: &#39;user&#39;, // id必填，且需要唯一
   state: () =&gt; {
     return {
       name: &#39;张三&#39;
     }
   },
   actions: {
     updateName(name) {
       this.name = name
     }
   }
 })
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>4.获取 State： 在 <code>src/components/usePinia.vue</code> 中使用</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> &lt;template&gt;
   &lt;div&gt;{{ userStore.name }}&lt;/div&gt;
 &lt;/template&gt;

 &lt;script lang=&quot;ts&quot; setup&gt;
 import { useUserStore } from &#39;@/store/user&#39;

 const userStore = useUserStore()
 userStore.updateName(&#39;李四&#39;)
 &lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>更详细上手指南：<a href="https://juejin.cn/post/7049196967770980389" target="_blank" rel="noopener noreferrer">链接<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 官方文档：<a href="https://pinia.vuejs.org/introduction.html" target="_blank" rel="noopener noreferrer">链接<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p></div><h2 id="集成-vue-router4" tabindex="-1"><a class="header-anchor" href="#集成-vue-router4" aria-hidden="true">#</a> 集成 <code>vue-router4</code></h2><h3 id="安装-1" tabindex="-1"><a class="header-anchor" href="#安装-1" aria-hidden="true">#</a> 安装</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm i vue-router --save
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="使用-1" tabindex="-1"><a class="header-anchor" href="#使用-1" aria-hidden="true">#</a> 使用</h3><p>1.新建 <code>src/router</code> 目录并在其下面创建 <code>index.ts</code>，导出 r<code>outer</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> import { createRouter, createWebHistory, RouteRecordRaw } from &#39;vue-router&#39;;

 const routes: Array&lt;RouteRecordRaw&gt; = [
   {
     path: &#39;/login&#39;,
     name: &#39;Login&#39;,
     meta: {
         title: &#39;登录&#39;,
         keepAlive: true,
         requireAuth: false
     },
     component: () =&gt; import(&#39;@/pages/login.vue&#39;)
   },
   {
       path: &#39;/&#39;,
       name: &#39;Index&#39;,
       meta: {
           title: &#39;首页&#39;,
           keepAlive: true,
           requireAuth: true
       },
       component: () =&gt; import(&#39;@/pages/index.vue&#39;)
   }
 ]

 const router = createRouter({
   history: createWebHistory(),
   routes
 });
 export default router;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2.在 <code>main.ts</code> 中引入并使用</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> import { createApp } from &#39;vue&#39;
 import App from &#39;./App.vue&#39;
 import store from &#39;./store&#39;
 import router from &#39;@/router&#39;;

 // 创建vue实例
 const app = createApp(App);

 app.use(router);

 // 挂载实例
 app.mount(&#39;#app&#39;);
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.修改 <code>App.vue</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> &lt;template&gt;
   &lt;RouterView/&gt;
 &lt;/template&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-集成-vueuse" tabindex="-1"><a class="header-anchor" href="#_5-集成-vueuse" aria-hidden="true">#</a> 5. 集成 <code>vueuse</code></h2><p><code>VueUse</code> 是一个基于 Composition API 的实用函数集合</p><h3 id="安装-2" tabindex="-1"><a class="header-anchor" href="#安装-2" aria-hidden="true">#</a> 安装</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm i @vueuse/core
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="使用-2" tabindex="-1"><a class="header-anchor" href="#使用-2" aria-hidden="true">#</a> 使用</h3><p>创建一个新的 <code>src/page/vueUse.vue</code> 页面来做一个简单的 demo</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> &lt;template&gt;
   &lt;h1&gt; 测试 vueUse 的鼠标坐标 &lt;/h1&gt;
   &lt;h3&gt;Mouse: {{x}} x {{y}}&lt;/h3&gt;
 &lt;/template&gt;

 &lt;script lang=&quot;ts&quot;&gt;
     import { defineComponent } from &#39;vue&#39;;
     import { useMouse } from &#39;@vueuse/core&#39;

     export default defineComponent({
         name: &#39;VueUse&#39;,
         setup() {
           const { x, y } = useMouse()

           return {
             x, y
           }
         }
     });
 &lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>useMouse 只是 vueuse 的一个最基本的函数库，还有许多，总会有一个适合你；</p><p>更多函数官方文档：<a href="https://vueuse.org/" target="_blank" rel="noopener noreferrer">链接<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="_6-scss-或-less-的集成" tabindex="-1"><a class="header-anchor" href="#_6-scss-或-less-的集成" aria-hidden="true">#</a> 6. scss 或 less 的集成</h2><h3 id="安装-3" tabindex="-1"><a class="header-anchor" href="#安装-3" aria-hidden="true">#</a> 安装</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> # .scss and .sass
 npm add -D sass

 # .less
 npm add -D less
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用在-vue-文件模板中" tabindex="-1"><a class="header-anchor" href="#使用在-vue-文件模板中" aria-hidden="true">#</a> 使用在 .vue 文件模板中</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>// .scss
 &lt;template&gt;
     &lt;div class=&quot;root&quot;&gt;
         &lt;h3&gt;欢迎使用 scss&lt;/h3&gt;
     &lt;/div&gt;
 &lt;/template&gt;
 &lt;style lang=&quot;scss&quot;&gt;
   .root {}
 &lt;/style&gt;

// .less
 &lt;template&gt;
     &lt;div class=&quot;root&quot;&gt;
         &lt;h3&gt;欢迎使用 less&lt;/h3&gt;
     &lt;/div&gt;
 &lt;/template&gt;
 &lt;style lang=&quot;less&quot;&gt;
   .root {}
 &lt;/style&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_7-集成-axios" tabindex="-1"><a class="header-anchor" href="#_7-集成-axios" aria-hidden="true">#</a> 7.集成 <code>axios</code></h2><p><code>axios</code> 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中</p><h3 id="安装-4" tabindex="-1"><a class="header-anchor" href="#安装-4" aria-hidden="true">#</a> 安装</h3><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm i axios
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="使用-3" tabindex="-1"><a class="header-anchor" href="#使用-3" aria-hidden="true">#</a> 使用</h3><p>1.新建 <code>src/utils/axios.ts</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> import axios, { AxiosResponse, AxiosRequestConfig } from &#39;axios&#39;;

 const service = axios.create();

 // Request interceptors
 service.interceptors.request.use(
     (config: AxiosRequestConfig) =&gt; {
         // do something
         return config;
     },
     (error: any) =&gt; {
         Promise.reject(error);
     }
 );

 // Response interceptors
 service.interceptors.response.use(
     async (response: AxiosResponse) =&gt; {
         // do something
     },
     (error: any) =&gt; {
         // do something
         return Promise.reject(error);
     }
 );

 export default service;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2.在页面中使用即可</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>&lt;script lang=&quot;ts&quot;&gt;
    import request from &#39;@/utils/axios&#39;;
    const requestRes = async () =&gt; {
        let result = await request({
                    url: &#39;/api/xxx&#39;,
                    method: &#39;get&#39;
                  });
    }

&lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="封装请求参数和响应数据的所有-api" tabindex="-1"><a class="header-anchor" href="#封装请求参数和响应数据的所有-api" aria-hidden="true">#</a> 封装请求参数和响应数据的所有 api</h3><p>1.新建 <code>src/api/index.ts</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>import * as login from &#39;./module/login&#39;;
import * as index from &#39;./module/index&#39;;

export default Object.assign({}, login, index);
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2.新建 <code>src/api/module/login.ts</code> 和 <code>src/api/module/index.ts</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>import request from &#39;@/utils/axios&#39;;

/**
 * 登录
 */

interface IResponseType&lt;P = {}&gt; {
    code?: number;
    status: number;
    msg: string;
    data: P;
}
interface ILogin {
    token: string;
    expires: number;
}
export const login = (username: string, password: string) =&gt; {
    return request&lt;IResponseType&lt;ILogin&gt;&gt;({
        url: &#39;/api/auth/login&#39;,
        method: &#39;post&#39;,
        data: {
            username,
            password
        }
    });
};
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.由于使用了 <code>typescript</code>，所以需新增 <code>src/types/shims-axios.d.ts</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>import { AxiosRequestConfig } from &#39;axios&#39;;
/**
 * 自定义扩展axios模块
 * @author Maybe
 */
declare module &#39;axios&#39; {
    export interface AxiosInstance {
        &lt;T = any&gt;(config: AxiosRequestConfig): Promise&lt;T&gt;;
        request&lt;T = any&gt;(config: AxiosRequestConfig): Promise&lt;T&gt;;
        get&lt;T = any&gt;(url: string, config?: AxiosRequestConfig): Promise&lt;T&gt;;
        delete&lt;T = any&gt;(url: string, config?: AxiosRequestConfig): Promise&lt;T&gt;;
        head&lt;T = any&gt;(url: string, config?: AxiosRequestConfig): Promise&lt;T&gt;;
        post&lt;T = any&gt;(url: string, data?: any, config?: AxiosRequestConfig): Promise&lt;T&gt;;
        put&lt;T = any&gt;(url: string, data?: any, config?: AxiosRequestConfig): Promise&lt;T&gt;;
        patch&lt;T = any&gt;(url: string, data?: any, config?: AxiosRequestConfig): Promise&lt;T&gt;;
    }
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>4.在 <code>src/pages/request.vue</code> 页面中使用</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>&lt;script lang=&quot;ts&quot;&gt;
    import API from &#39;@/api&#39;;

    const requestRes = async () =&gt; {
        let result = await API.login(&#39;zhangsan&#39;, &#39;123456&#39;);
    }

&lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_8-css-的-ui-样式库" tabindex="-1"><a class="header-anchor" href="#_8-css-的-ui-样式库" aria-hidden="true">#</a> 8.css 的 UI 样式库</h2><p>可选很多，根据自己项目的需求去进行选择即可</p><p><strong>注意：UI 库一般需要按需引入</strong></p><h2 id="_9-使用-commitizen-规范-git-提交" tabindex="-1"><a class="header-anchor" href="#_9-使用-commitizen-规范-git-提交" aria-hidden="true">#</a> 9.使用 commitizen 规范 git 提交</h2><p>为了使团队多人协作更加的规范，所以需要每次在 git 提交的时候，做一次硬性规范提交，规范 git 的提交信息</p><h3 id="安装-commitizen-交互式提交-自定义提示文案-commit-规范" tabindex="-1"><a class="header-anchor" href="#安装-commitizen-交互式提交-自定义提示文案-commit-规范" aria-hidden="true">#</a> 安装 <code>commitizen</code> (交互式提交 + 自定义提示文案 + Commit 规范)</h3><p>1.安装</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>npm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>2.配置 <code>package.json</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{
  ...
  &quot;scripts&quot;: {
    &quot;commit:comment&quot;: &quot;引导设置规范化的提交信息&quot;,
    &quot;commit&quot;:&quot;git-cz&quot;,
  },

  &quot;config&quot;: {
      &quot;commitizen&quot;: {
        &quot;path&quot;: &quot;node_modules/cz-customizable&quot;
      }
  },
  ...
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.新增配置 <code>commitlint.config.js</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module.exports = {
    extends: [&#39;@commitlint/config-conventional&#39;, &#39;cz&#39;],
    rules: {
        &#39;type-enum&#39;: [
            2,
            &#39;always&#39;,
            [
                &#39;feature&#39;, // 新功能（feature）
                &#39;bug&#39;, // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
                &#39;fix&#39;, // 修补bug
                &#39;ui&#39;, // 更新 ui
                &#39;docs&#39;, // 文档（documentation）
                &#39;style&#39;, // 格式（不影响代码运行的变动）
                &#39;perf&#39;, // 性能优化
                &#39;release&#39;, // 发布
                &#39;deploy&#39;, // 部署
                &#39;refactor&#39;, // 重构（即不是新增功能，也不是修改bug的代码变动）
                &#39;test&#39;, // 增加测试
                &#39;chore&#39;, // 构建过程或辅助工具的变动
                &#39;revert&#39;, // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
                &#39;merge&#39;, // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
                &#39;build&#39;, // 打包
            ],
        ],
        // &lt;type&gt; 格式 小写
        &#39;type-case&#39;: [2, &#39;always&#39;, &#39;lower-case&#39;],
        // &lt;type&gt; 不能为空
        &#39;type-empty&#39;: [2, &#39;never&#39;],
        // &lt;scope&gt; 范围不能为空
        &#39;scope-empty&#39;: [2, &#39;never&#39;],
        // &lt;scope&gt; 范围格式
        &#39;scope-case&#39;: [0],
        // &lt;subject&gt; 主要 message 不能为空
        &#39;subject-empty&#39;: [2, &#39;never&#39;],
        // &lt;subject&gt; 以什么为结束标志，禁用
        &#39;subject-full-stop&#39;: [0, &#39;never&#39;],
        // &lt;subject&gt; 格式，禁用
        &#39;subject-case&#39;: [0, &#39;never&#39;],
        // &lt;body&gt; 以空行开头
        &#39;body-leading-blank&#39;: [1, &#39;always&#39;],
        &#39;header-max-length&#39;: [0, &#39;always&#39;, 72],
    },
};
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>4.自定义提示则添加 <code>.cz-config.js</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>module.exports = {
    types: [
        {value: &#39;feature&#39;,  name: &#39;feature:  增加新功能&#39;},
        {value: &#39;bug&#39;,      name: &#39;bug:      测试反馈bug列表中的bug号&#39;},
        {value: &#39;fix&#39;,      name: &#39;fix:      修复bug&#39;},
        {value: &#39;ui&#39;,       name: &#39;ui:       更新UI&#39;},
        {value: &#39;docs&#39;,     name: &#39;docs:     文档变更&#39;},
        {value: &#39;style&#39;,    name: &#39;style:    代码格式(不影响代码运行的变动)&#39;},
        {value: &#39;perf&#39;,     name: &#39;perf:     性能优化&#39;},
        {value: &#39;refactor&#39;, name: &#39;refactor: 重构(既不是增加feature，也不是修复bug)&#39;},
	{value: &#39;release&#39;,  name: &#39;release:  发布&#39;},
	{value: &#39;deploy&#39;,   name: &#39;deploy:   部署&#39;},
        {value: &#39;test&#39;,     name: &#39;test:     增加测试&#39;},
        {value: &#39;chore&#39;,    name: &#39;chore:    构建过程或辅助工具的变动(更改配置文件)&#39;},
        {value: &#39;revert&#39;,   name: &#39;revert:   回退&#39;},
    	{value: &#39;build&#39;,    name: &#39;build:    打包&#39;}
    ],
    // override the messages, defaults are as follows
    messages: {
        type: &#39;请选择提交类型:&#39;,
        customScope: &#39;请输入您修改的范围(可选):&#39;,
        subject: &#39;请简要描述提交 message (必填):&#39;,
        body: &#39;请输入详细描述(可选，待优化去除，跳过即可):&#39;,
        footer: &#39;请输入要关闭的issue(待优化去除，跳过即可):&#39;,
        confirmCommit: &#39;确认使用以上信息提交？(y/n/e/h)&#39;
    },
    allowCustomScopes: true,
    skipQuestions: [&#39;body&#39;, &#39;footer&#39;],
    subjectLimit: 72
};
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>到目前只是规范了 git 的提交信息，我们对提交前代码的检查还没有做到位，例如 ESLint、Prettier，毕竟谁都会有疏忽的时候，那么现在我们的 husky 就闪亮登场了</p><h3 id="安装-husky" tabindex="-1"><a class="header-anchor" href="#安装-husky" aria-hidden="true">#</a> 安装 husky</h3><p>1.安装</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code># 1.安装
npm i husky lint-staged -D

# 2.生成 .husky 的文件夹
npx husky install

# 3.添加 hooks，会在 .husky 目录下生成一个 pre-commit 脚本文件
npx husky add .husky/pre-commit &quot;npx --no-install lint-staged&quot;

# 4.添加 commit-msg
npx husky add .husky/commit-msg &#39;npx --no-install commitlint --edit &quot;$1&quot;&#39;

# 5. 使用 `git commit -m &quot;message&quot;` 就会看到 hook 生效了。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2.添加配置 <code>package.json</code></p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{
  ...
  &quot;lint-staged&quot;: {
    	&quot;*.{js,ts}&quot;: [
            &quot;npm run eslint&quot;,
            &quot;npm run prettier&quot;
    	]
  }
  ...
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!----><footer class="page-meta"><div class="meta-item edit-link"><a href="https://github.com/hjdbenny/blog/edit/main/web/vue3.md" rel="noopener noreferrer" target="_blank" aria-label="编辑此页" class="nav-link label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon edit-icon" viewbox="0 0 1024 1024" fill="currentColor" aria-label="edit icon"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></svg><!--]-->编辑此页<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!----></a></div><!----><!----></footer><nav class="page-nav"><a href="/blog/web/markdown.html" class="nav-link prev" aria-label="Markdown 示例"><div class="hint"><span class="arrow left"></span>上一页</div><div class="link"><!---->Markdown 示例</div></a><!----></nav><!----><!----><!--]--></main><!--]--><footer class="footer-wrapper"><div class="footer"></div><div class="copyright">Copyright © 2022 潇湘阁听雨</div></footer><!--]--></div><!--]--><!----><!--]--></div>
    <script type="module" src="/blog/assets/app.0bf46e8a.js" defer></script>
  </body>
</html>
